<template>
  <ry-modal title="细胞信息" v-model="visible" destroyOnClose
    :confirmLoading="confirmLoading" :ryfooter="null" width="1000px">
      <div class="table-container">
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form-model layout="inline" v-bind="searchModelConfig"
                        @keyup.enter.native="searchQuery">
            <a-row v-bind="searchRowConfig">
<!--              <a-col :span="5">-->
<!--                <a-form-model-item label="细胞编号">-->
<!--                  <a-input-->
<!--                    v-model="queryParam.cellCode"-->
<!--                    placeholder="请输入细胞编号" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
              <a-col :span="8">
                <a-form-model-item label="申请项目名称">
                  <ry-select
                    v-model="queryParam.applyProject"
                    :dataSource="$getDict('APPLY_PROJECT')"
                    placeholder="请选择项目名称" />
                </a-form-model-item>
              </a-col>
              <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                <a-button @click="searchQuery" type="primary">查询</a-button>
                <a-button @click="queryReset" type="danger">重置</a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
        <a-row>
          <a-col :span="24">
            <ry-table :columns="columns" :loading="loading" :data-source="dataSource"
                      :rowKey="record=>record.id" bordered
                      :scroll="{ x: 'max-content'}">
              <template slot="applyProject" slot-scope="{text}">
                <span v-if="text">
                  <a-tag v-for="tag in text.split(',')" :key="tag" color="blue">{{$getDictName('APPLY_PROJECT', tag)}}</a-tag>
                </span>
                <span v-else>未购买项目</span>
              </template>
              <template slot="status" slot-scope="{text}">
                <span>{{$getDictName('cell_status', text)}}</span>
              </template>
              <template slot="cellType" slot-scope="{text}">
                <span>{{$getDictName('cell_type', text)}}</span>
              </template>
              <template slot="sourceType" slot-scope="{text}">
                <span>{{$getDictName('record_source', text)}}</span>
              </template>
            </ry-table>
          </a-col>
        </a-row>
      </div>
  </ry-modal>
</template>

<script>
import { RyListMixin } from '@/ryweb'

export default {
  mixins: [RyListMixin],
  data () {
    return {
      count: 0,
      confirmLoading: false,
      initQuery: false,
      visible: false,
      queryParam: {},
      form: {},
      modelConfig: {
        ref: 'ruleForm',
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      url: {
        list: this.$api.permission.cellList.cell
      },
      columns: [
        {
          title: '项目',
          align: 'center',
          dataIndex: 'applyProject',
          scopedSlots: { customRender: 'applyProject' }
        },
        {
          title: '细胞编号',
          align: 'center',
          dataIndex: 'cellCode',
          scopedSlots: { customRender: 'cellCode' }
        },
        {
          title: '采样时间',
          align: 'center',
          dataIndex: 'sampleTime'
        },
        {
          title: '细胞类型',
          align: 'center',
          dataIndex: 'cellType',
          scopedSlots: { customRender: 'cellType' }
        },
        {
          title: '细胞来源类型',
          align: 'center',
          dataIndex: 'sourceType',
          scopedSlots: { customRender: 'sourceType' }
        },
        {
          title: '细胞管数',
          align: 'center',
          dataIndex: 'cellNum'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ],
    }
  },
  created () {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    open (record) {
      this.queryParam = {
        accountId: record.id
      }
      this.form = {...record}
      this.visible = true
      this.loadData()
    },
    queryReset () {
      this.queryParam = {
        accountId: this.form.id
      }
      this.loadData()
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.15rem;
}
.editable-add-btn {
  margin-bottom: 8px;
}
.table-container {
  padding: 0px;
}
</style>
<style>
/* 使用更高优先级的选择器覆盖默认宽度 */
body .ry-modal {
  width: 60% !important;
}
</style>
